<template>
	<view class="compose_success">
		<u-navbar :is-back="false" :background="{backgroundColor: '#6BD288'}" :border-bottom="false" title="">
			<view class="slot_content">
				<view class="nav_img" @click="backTo">
					<image src="@/static/28.svg"></image>
				</view>
				<view class="nav_title">合成成功!</view>
			</view>
		</u-navbar>
		<view class="header">
			<view class="desc">
				<image src="@/static/37.svg"></image>
				<text>藏品合成成功！</text>
			</view>
			<view class="success_text">藏品已转入您的个人中心,请查看</view>
		</view>
		<view class="content">
			<view class="content_view">
				<view class="title">
					<text>订单详情</text>
					<text>ORDER</text>
				</view>
				<view class="list">
					<view class="core top_left_core"></view>
					<view class="core top_right_core"></view>
					<view class="core bottom_left_core"></view>
					<view class="core bottom_right_core"></view>
					<view class="item">
						<image :src="cover" class="img_box"></image>
						<view class="name">{{name}}</view>
					</view>
					<view class="item">
						<view class="key">订单编号</view>
						<view class="value">{{order_no}}</view>
					</view>
				</view>
				<view class="footer">
					<view class="item">
						<text>{{created_at}}</text>
						<view>藏品转入成功</view>
					</view>
					<view class="item desc">—— Rights order ——</view>
				</view>
			</view>
			<view class="nav_btn">
				<view class="buy_btn" @click="backTo">继续合成</view>
				<view class="my_btn" @click="router">个人中心</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cover: "",
				name: "",
				order_no: "",
				created_at:""
			}
		},
		async onLoad(option) {
			let {
				info
			} = await this.$u.api.orderInfo({
				id: option.id
			});
			this.cover = info.product_cover;
			this.name = info.product_name;
			this.order_no = info.order_no;
			this.created_at = info.created_at;
		},
		methods: {
			backTo() {
				uni.navigateBack()
			},
			router(url) {
				uni.switchTab({
					url: '/pages/tabbar/my'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	$headerHeight:224rpx;

	.header {
		width: 100%;
		height: $headerHeight;
		padding: 44rpx 30rpx;
		box-sizing: border-box;
		background: #6BD288;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: fixed;
		left: 0;
		top: 44px;
		z-index: 2;

		.desc {
			height: 72rpx;
			display: flex;
			align-items: center;

			image {
				width: 72rpx;
				height: 72rpx;
				margin-right: 8rpx;
			}

			text {
				color: #FFFFFF;
				font-size: 36rpx;
			}
		}

		.success_text {
			color: #D1F1DA;
			font-size: 24rpx;
		}
	}


	.compose_success {
		padding: $headerHeight 30rpx 0;

		.nav_title {
			color: #fff;
		}

		.content {
			margin-top: 44rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.content_view {
				width: 400rpx;
				border-radius: 20rpx;
				// padding: 0 44rpx;
				box-sizing: border-box;
				background: #F0FBF3;

				.title {
					padding: 44rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #A7A7A7;
					font-size: 24rpx;
					font-weight: 400;
				}

				.list {
					border-top: 2px dashed #FFFFFF;
					border-bottom: 2px dashed #FFFFFF;
					padding: 44rpx 44rpx 0;
					box-sizing: border-box;
					position: relative;
					display: flex;
					flex-direction: column;

					.core {
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
						background-color: #fff;
						position: absolute;

						&.top_left_core {
							top: -10rpx;
							left: -10rpx;
						}

						&.top_right_core {
							top: -10rpx;
							right: -10rpx;
						}

						&.bottom_left_core {
							bottom: -10rpx;
							left: -10rpx;
						}

						&.bottom_right_core {
							bottom: -10rpx;
							right: -10rpx;
						}
					}

					.item {
						margin-bottom: 44rpx;
						display: flex;
						flex-direction: column;
						align-items: center;

						.img_box {
							width: 70rpx;
							height: 70rpx;
							border-radius: 10rpx;
							margin-bottom: 16rpx;
						}

						.name {
							width: 100%;
							text-align: center;
							color: #2A2A2A;
							font-size: 28rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}

						.key {
							color: #A7A7A7;
							font-size: 20rpx;
							font-weight: 400;
							margin-bottom: 16rpx;
						}

						.value {
							color: #2A2A2A;
							font-size: 28rpx;
						}
					}
				}

				.footer {
					padding: 44rpx 0 0;
					box-sizing: border-box;

					.item {
						text-align: center;
						margin-bottom: 44rpx;

						text {
							color: #A7A7A7;
							font-size: 20rpx;
							font-weight: 400;
							margin-bottom: 16rpx;
						}

						view {
							color: #2A2A2A;
							font-size: 28rpx;
						}

						&.desc {
							color: #A7A7A7;
							font-size: 20rpx;
							font-weight: 400;
						}
					}
				}
			}

			.nav_btn {
				width: 100%;
				margin: 88rpx 0;
				display: flex;
				justify-content: space-between;

				view {
					width: 330rpx;
					height: 88rpx;
					font-size: 28rpx;
					font-weight: bold;
					border-radius: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					&.buy_btn {
						color: #2A2A2A;
						border: 1px solid #F0F0F0;
					}

					&.my_btn {
						color: #FFFFFF;
						background: #6BD288;
					}
				}
			}
		}
	}
</style>
